<template>
  <div class="wrapper">
    <div class="search">
      <input type='text' v-model="keywords" placeholder='请搜索患者' class="search-input"/>
      <span class="search-text" @click="ev_search">搜索</span>
    </div>
    <div class="content">
      <div class="panel" v-for="(item,idx) in listData" :key="item.id" @click="currentIndex = idx">
        <div class="title">{{item.name}}，{{item.sex == 1 ? '女' : '男'}}，{{item.age}}岁，{{ item.create_at }}</div>
        <div class="desc">{{ item.illness_info }}</div>
        <div class="checkbox" :class="{currentCls:currentIndex == idx}"></div>
      </div>
  
    </div>
    <div class="option">
      <button class='add-sick' type='primary'  @click="toPage('/pages/createCase/index')">添加新病例</button>
      <button class='next' type='primary'  @click="toPage('/pages/caseDetail/index')">查看或添加随访影像资料</button>
    </div>
  
  </div>
  </template>
  
  <script>
    import request from '../../utils/request'
  
  export default {
    components:{
    },
    data() {
      return {
        keywords:'',
        listData:[],
        currentIndex:0
      }
    },
    async onLoad() {
      this.ev_search()
    },
    methods: {
      async ev_search(){
        const parames = {
          keywords:this.keywords
        }
        const resData = await request('api/case1/caseList', 'post', parames);
        console.log("🚀 ~ ev_search ~ resData:", resData)
        this.listData = resData.data
      },
      toPage(url){
        uni.navigateTo({
          url: url + '?data=' + JSON.stringify(this.listData[this.currentIndex])
        });
     }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .search-text {
    color: #0094FF;
    margin:10upx 0 0 30upx;
  }
  .wrapper {
    display       : flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 15upx;
    padding-bottom: 50upx;
    .search {
      border-bottom: 1upx solid #E9E9E9;
      padding: 40upx 0;
      margin: 0 10upx;
      display: flex;
      align-items: center;
      .search-input {
        width: 540upx;
        color: #0e0e0e;
        border: 1upx solid #66C2FF;
        display: block;
        height: 80upx;
        background-color: #F0F9FF;
        border-radius: 40upx;
        padding-left: 40upx;
        margin-top: 15upx;
        color: #000000;
      }
      
    }
    .content {
      background: #FFFFFF;
      box-shadow: 0upx -8upx 40upx 0upx rgba(0,73,126,0.1);
      border-radius: 60upx 60upx 0upx 0upx;
      padding: 30upx 40upx;
      margin-top: 40upx;
      min-height: 100vh;
      .panel {
        border-bottom: 1upx solid #E9E9E9;
        position: relative;
        padding: 30upx 0;
        font-size: 30upx;
        .desc {
          font-size: 24upx;
          margin-top: 10upx;
        }
        .checkbox {
          width: 32upx;
          height: 32upx;
          background: #D9F0FF;
          border: 1upx solid #0094FF;
          position: absolute;
          top: calc(50% - 16upx);
          right: 0;
          border-radius: 15upx;
        }
        .currentCls {
          background: url(@/static/images/check-icon.png) center center no-repeat;
          background-size: cover;
        }
      }
    }
    .option {
      display: flex;
      position: fixed;
      bottom: 100upx;
      left: 0;
      right: 0;
      font-size: 26upx;
      font-weight: bold;
      .add-sick {
        width: 230upx;
        height: 88upx;
        background: #E3F3FF;
        border-radius: 100upx;
        color: #0094FF;
      }
      .next {
        background-color: #0094FF;
        border-radius: 130upx;
        color: #fff;
      }
    }
   
  }
  
  
  </style>
  